Week-8 后端 Lab
任务目标
本实验的目标是通过前端 HTML 页面来测试已搭建的头像上传和展示功能。学生将通过创建两个简单的 HTML 文件来与后端服务器进行交互，测试头像上传和头像展示的功能。
1. 前提条件
确保你按照 doc 内容操作，后端服务器 server.js 已经在你的电脑上启动，并且能够通过 http://localhost:3000 访问。后端服务会处理头像上传、存储以及根据用户名查询头像。
2. 创建前端页面
在你的电脑上创建以下两个 HTML 文件，并双击打开它们来进行测试。
upload.html ：上传头像页面
这个页面允许用户选择头像并提交给后端。表单提交后，前端会向后端发送 POST 请求以上传头像。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传头像</title>
</head>
<body>
<h1>上传头像</h1>
<form id="uploadForm" enctype="multipart/form-data">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<label for="avatar">选择头像：</label>
<input type="file" id="avatar" name="avatar" required><br><br>
<button type="submit">上传</button>
</form>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData();
const username = document.getElementById('username').value;
const avatar = document.getElementById('avatar').files[0];
formData.append('username', username);
formData.append('avatar', avatar);
fetch('http://localhost:3000/upload-avatar', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
alert('上传成功!');
})
.catch(error => {
alert('上传失败!');
});
});
</script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
show.html ：展示头像页面
这个页面允许用户输入用户名，点击按钮后，页面会通过 GET 请求从后端获取头像并展示。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查看头像</title>
</head>
<body>
<h1>查看头像</h1>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br><br>
<button onclick="showAvatar()">查询头像</button>
<div id="avatarContainer">
<!-- 头像将显示在这里 -->
</div>
<script>
function showAvatar() {
const username = document.getElementById('username').value;
fetch(`http://localhost:3000/get-avatar/${username}`)
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
document.getElementById('avatarContainer').innerHTML = `<img src="${imageUrl}" alt="头像">`;
})
.catch(error => {
alert('用户未找到或头像加载失败');
});
}
</script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
3. 测试步骤
1. 打开上传头像页面
- 在你的本地电脑上创建并保存
upload.html 文件。 - 双击
upload.html 文件，用浏览器打开。 - 在页面中输入一个用户名，并选择一个头像文件，然后点击 "上传" 按钮。
- 如果上传成功，浏览器会显示 "上传成功！" 的提示，头像文件会被上传到服务器并保存。
2. 打开查看头像页面
- 在你的本地电脑上创建并保存
show.html 文件。 - 双击
show.html 文件，用浏览器打开。 - 输入之前上传头像时使用的用户名，并点击 "查询头像" 按钮。
- 如果用户名对应的头像存在，头像会显示在页面上；否则，页面会显示 "用户未找到或头像加载失败"。
4. 注意
- 确保服务器在运行中：只有在服务器正常运行时，前端页面才能与后端进行交互。
- 文件上传大小限制：根据后端配置，Multer 可能会限制上传的文件大小。请确保上传的文件不超过限制。
- 浏览器跨域问题：如果你遇到跨域问题（CORS），你可能需要在后端配置 CORS 处理。我们已经学习过跨域问题。